<template>
  <div>
    <a-spin :spinning="loading">
      <a-card title="样本详情">
        <a-row>
          <a-col :span="12">
            <p><strong>名称:</strong> {{ form.name }}</p>
          </a-col>
          <a-col :span="12">
            <p><strong>类型:</strong> {{ form.samplesType }}</p>
          </a-col>
          <a-col :span="12">
            <p><strong>日期:</strong> {{ form.date }}</p>
          </a-col>
          <a-col :span="12">
            <p><strong>时间:</strong> {{ form.time }}</p>
          </a-col>
          <a-col :span="12">
            <p><strong>keywords:</strong> {{ form.samplesKeywords }}</p>
          </a-col>
          <a-col :span="12">
            <p><strong>样本数量:</strong> {{ form.samplesAmount }}</p>
          </a-col>
          <a-col :span="24">
            <p><strong>存储位置:</strong></p>
            <ul>
              <li v-for="location in form.storageLocationList" :key="location.id">
                <p><strong>Location:</strong> {{ location.storageLocation }}</p>
              </li>
            </ul>
          </a-col>
          <a-col :span="24">
            <p><strong>条件:</strong> {{ form.conditionTextx }}</p>
          </a-col>
          <a-col :span="24">
            <p><strong>文件地址:</strong> {{ form.fileAddress }}</p>
          </a-col>
        </a-row>
      </a-card>
    </a-spin>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { SampleApi } from './api/SampleApi';  // 根据你的项目结构调整路径

const route = useRoute();
const id = route.params.id;
const loading = ref(true);
const form = ref({});

onMounted(async () => {
  await getDetail();
});

const getDetail = async () => {
  try {
    const res = await SampleApi.detail({ id });
    form.value = res;
  } catch (error) {
    console.error('Error fetching sample detail:', error);
  } finally {
    loading.value = false;
  }
};
</script>

<style></style>
